import React, { useState } from 'react';
import { NavBar, Image, Grid, Button } from 'antd-mobile';
import {
    LeftOutline,
    StarOutline,
    StarFill,
    LocationOutline,
    MoreOutline
} from 'antd-mobile-icons';
import { useNavigate } from 'react-router-dom';
import '../styles/hospitalDetail.scss';

// 科室接口
interface Department {
    id: string;
    name: string;
    icon: string;
    color: string;
}

const HospitalDetailPage: React.FC = () => {
    const navigate = useNavigate();
    const [isFavorite, setIsFavorite] = useState(false);

    // 科室列表数据
    const departments: Department[] = [
        { id: '1', name: '心内科', icon: '❤️', color: '#e6f7ff' },
        { id: '2', name: '呼吸科', icon: '🫁', color: '#f6ffed' },
        { id: '3', name: '神经科', icon: '🧠', color: '#fff7e6' },
        { id: '4', name: '骨科', icon: '🦴', color: '#fff1f0' },
        { id: '5', name: '眼科', icon: '👁️', color: '#e6f7ff' },
        { id: '6', name: '口腔科', icon: '🦷', color: '#f9f0ff' },
        { id: '7', name: '儿科', icon: '👶', color: '#fff7e6' },
        { id: '8', name: '更多', icon: '•••', color: '#f5f5f5' },
    ];

    const toggleFavorite = () => {
        setIsFavorite(!isFavorite);
    };

    const handleBack = () => {
        navigate('/hospital-list');
    };

    const handleAppointment = () => {
        // 处理预约逻辑
        console.log('预约');
    };

    const handleCall = () => {
        // 拨打电话
        console.log('拨打电话');
    };

    const handleNavigate = () => {
        // 导航
        console.log('导航');
    };

    const handleShare = () => {
        // 分享
        console.log('分享');
    };

    const handleConsult = () => {
        // 咨询
        console.log('咨询');
    };

    const handleDepartmentClick = (departmentName: string) => {
        navigate(`/doctors/${encodeURIComponent(departmentName)}`);
    };

    return (
        <div className="hospital-detail-page">
            {/* 顶部导航栏 */}
            <NavBar
                className="nav-bar"
                backArrow={<LeftOutline />}
                onBack={handleBack}
                right={
                    <div className="favorite-icon" onClick={toggleFavorite}>
                        {isFavorite ? <StarFill color="#ffc53d" /> : <StarOutline />}
                    </div>
                }
            >
                协和医院
            </NavBar>

            {/* 医院信息卡片 */}
            <div className="hospital-info-card">
                <div className="hospital-header">
                    <div className="hospital-logo">
                        <Image
                            src="https://via.placeholder.com/80"
                            width={80}
                            height={80}
                            fit="cover"
                            placeholder=""
                            alt="协和医院"
                        />
                    </div>
                    <div className="hospital-info">
                        <h1 className="hospital-name">协和医院</h1>
                        <div className="hospital-level">三甲 | 综合医院</div>
                        <div className="hospital-tags">
                            <span className="tag score-tag">医院总评分 9.5</span>
                            <span className="tag booking-tag">可线上挂号</span>
                        </div>
                        <div className="hospital-address">
                            <LocationOutline /> 北京市东城区帅府园1号
                        </div>
                    </div>
                </div>

                {/* 操作按钮 */}
                <div className="action-buttons">
                    <div className="action-item" onClick={handleCall}>
                        <div className="action-icon call-icon">📞</div>
                        <div className="action-text">联系电话</div>
                    </div>
                    <div className="action-item" onClick={handleNavigate}>
                        <div className="action-icon navigate-icon">🧭</div>
                        <div className="action-text">导航</div>
                    </div>
                    <div className="action-item" onClick={handleShare}>
                        <div className="action-icon share-icon">🔄</div>
                        <div className="action-text">分享</div>
                    </div>
                </div>
            </div>

            {/* 科室导航 */}
            <div className="department-section">
                <div className="section-title">科室导航</div>
                <div className="department-grid">
                    <Grid columns={4} gap={8}>
                        {departments.map(dept => (
                            <Grid.Item key={dept.id}>
                                <div
                                    className="department-item"
                                    style={{ backgroundColor: dept.color }}
                                    onClick={() => handleDepartmentClick(dept.name)}
                                >
                                    <div className="department-icon">{dept.icon}</div>
                                    <div className="department-name">{dept.name}</div>
                                </div>
                            </Grid.Item>
                        ))}
                    </Grid>
                </div>
            </div>

            {/* 底部操作区 */}
            <div className="bottom-action-bar">
                <div className="consult-button" onClick={handleConsult}>
                    <span className="consult-icon">💬</span>
                    <span>咨询</span>
                </div>
                <Button
                    block
                    color="primary"
                    className="appointment-button"
                    onClick={handleAppointment}
                >
                    立即预约
                </Button>
            </div>

            {/* 页面标题提示 */}
            <div className="page-footer">医院详情页</div>
        </div>
    );
};

export default HospitalDetailPage; 